<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="./js/angular/angular.min.js">
  app.directive('ensureUnique', function($http){
      return {
        require: 'ngModel',
        link: function(scope, ele, attrs, c) {
          scope.$watch(attrs.ngModel, function(n) {
          if (!n) return;
          $http({
            method: 'POST',
            url: '/api/check/' + attrs.ensureUnique,
            data: {
              field: attrs.ensureUnique,
              value: scope.ngModel
            }
          }).success(function(data) {
            c.$setValidity('unique', data.isUnique);
          }).error(function(data) {
            c.$setValidity('unique', false);
          });
        });
      }
    };
  });
</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <form name="signup_form" novalidateng-submit="signupForm()">
    <fieldset>
      <legend>Signup</legend>
      <div class="row">

        <div class="large-12 columns">
          <label>Your name</label>
          <input type="text"
                 placeholder="Name"
                 name="name"
                 ng-model="signup.name"
                 ng-minlength="3"
                 ng-maxlength="20" required />
          <div class="error"
         ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
            <small class="error"
                   ng-show="signup_form.name.$error.required">
              Your name is required.
            </small>
            <small class="error"
                   ng-show="signup_form.name.$error.minlength">
              Your name is required to be at least 3 characters
            </small>
            <small class="error"
                   ng-show="signup_form.name.$error.maxlength">
              Your name cannot be longer than 20 characters
            </small>
          </div>
        </div>

        <div class="large-12 columns">
          <label>Your email</label>
          <input type="email"
                 placeholder="Email"
                 name="email"
                 ng-model="signup.email"
                 ng-minlength="3"
                 ng-maxlength="20" required />
          <div class="error"
         ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
            <small class="error"
                   ng-show="signup_form.email.$error.required">
              Your email is required.
            </small>
            <small class="error"
                   ng-show="signup_form.email.$error.minlength">
              Your email is required to be at least 3 characters
            </small>
            <small class="error"
                   ng-show="signup_form.email.$error.maxlength">
              Your email cannot be longer than 20 characters
            </small>
          </div>
        </div>

        <div class="large-12 columns">
          <label>Username</label>
          <input type="text"
                 placeholder="Desired username"
                 name="username"
                 ng-model="signup.username"
                 ng-minlength="3"
                 ng-maxlength="20"
                 ensure-unique="username" required />
          <div class="error"
         ng-show="signup_form.username.$dirty && signup_form.email.$invalid">
            <small class="error"
                   ng-show="signup_form.username.$error.required">
              Please input a username.
            </small>
            <small class="error"
                   ng-show="signup_form.username.$error.minlength">
              Your username is required to be at least 3 characters
            </small>
            <small class="error"
                   ng-show="signup_form.username.$error.maxlength">
              Your username cannot be longer than 20 characters
            </small>
            <small class="error"
                   ng-show="signup_form.username.$error.unique">
              That username is taken, please try another
            </small>
          </div>
        </div>

      </div>
      <button type="submit" class="button radius">Submit</button>
    </fieldset>
  </form>
</body>
</html>
